<template>
  <div class="subtable-card">
    <div v-if="element.value.length && element.subform.length">
      <div v-for="(valueItem, index) in element.value" :key="index">
        <div class="card-table-top">
          <div class="card-index">序号{{ index+1 }}</div>
          <template v-if="!isDetail && !element.options.hideOperation">
            <div class="button-text" @click="copyCol(valueItem)">复制</div>
            <div class="separate">|</div>
            <div class="button-text" @click="deleteItem(valueItem)">删除</div>
          </template>
        </div>
        <template v-for="(elementItem) in element.subform">
          <TableCardItem
            v-if="isShowElement(elementItem)"
            :element="elementItem"
            :value-index="index"
            :parent-element="element"
            :key="elementItem.key"
            :is-detail="isDetail"
            :is-in-detail="isInDetail"
            :event-data="eventData"
            :form-options="formOptions"
            :subform-index="index"
            :subform-element="element"
            @handleFormUserSelect="handleFormUserSelect"
          />
        </template>
      </div>
    </div>
    <div v-else class="empty">暂无数据</div>
    <PlainCreateBtn v-if="!isDetail && !element.options.hideOperation" class="add-btn" @click="addCol">添加</PlainCreateBtn>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import TableCardItem from './tableCardItem';
export default {
  name: 'TableCard',
  components: { TableCardItem },
  props: {
    element: {
      type: Object,
      default: null
    },
    isDetail: { // 是否详情页展示
      type: Boolean,
      default: false
    },
    isInDetail: { // 是否详情页展示，isDetail可能因为事件而改变，导致实际在详情页而 isDetail 为false，这个属性不会改变，详情页永远为true
      type: Boolean,
      default: false
    },
    eventData: { // 事件
      type: Object,
      default: null
    },
    formOptions: {
      type: Object,
      default: () => ({})
    },
    isShowElement: { // 判断字段是否可以展示
      type: Function,
      default: null
    }
  },
  computed: {
    ...mapState({
      'selectWidget': state => state.formMake.selectWidget
    })
  },
  methods: {
    addCol() {
      this.$emit('addCol');
    },
    copyCol(item) {
      this.$emit('copyCol', item);
    },
    deleteItem(item) {
      this.$emit('deleteItem', item);
    },
    handleFormUserSelect(data) {
      this.$emit('handleFormUserSelect', data);
    }
  }
};
</script>

<style lang="scss" scoped>
.subtable-card {
  width: 100%;
  .add-btn {
    margin-bottom: 10px;
  }
}
.card-table-top {
  display: flex;
  align-items: center;
  padding: 0px 9px;
  height: 40px;
  background-color: #f9f9f9;
  margin-bottom: 16px;
  .card-index {
    font-size: 14px;
    flex: 1;
    color: #141C3D;
    font-weight: 550;
  }
  .separate {
    margin: 0 5px;
    color: #ddd;
  }
}
</style>
